<app-toolbar>
    <app-search-form placeholder="请输入产品名称"
        (onSearch)="search($event)"></app-search-form>
    <app-batch-btn *ngIf="!ref"
        [showDelBtn]="false"
        uploadApi="/api/product/import"
        downloadApi="/api/product/export"
        (add)="handleEdit()"></app-batch-btn>
</app-toolbar>
<ng-container *ngIf="ref">
    <nz-table #basicTable
        [nzData]="datum"
        [nzFrontPagination]="false"
        [nzLoading]="loading"
        [nzScroll]="getTableHeight()"
        nzShowPagination
        [nzShowTotal]="totalTemplate"
        nzShowSizeChanger
        [nzTotal]="total"
        (nzPageSizeChange)="pageSizeChange($event)"
        (nzPageIndexChange)="pageIndexChange($event)"
        [nzPageSize]="pageSize"
        [nzPageIndex]="pageIndex"
        (nzQueryParams)="onQuery($event)">
        <thead>
            <tr>
                <th [nzChecked]="checked"
                    [nzIndeterminate]="indeterminate"
                    (nzCheckedChange)="handleAllChecked($event)"
                    *ngIf="!ref"></th>
                <th nzColumnKey="id"
                    [nzSortFn]="true">ID</th>
                <th nzColumnKey="name"
                    [nzSortFn]="true">名称</th>
                <th nzColumnKey="desc">说明</th>
                <th nzColumnKey="created"
                    [nzSortFn]="true">日期</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of basicTable.data; let i = index"
                (dblclick)="select(data)">
                <td [nzChecked]="setOfCheckedId.has(data.id)"
                    (nzCheckedChange)="handleItemChecked(data.id, $event)"
                    *ngIf="!ref"></td>
                <td>{{ data.id }}</td>
                <td>{{ data.name }}</td>
                <td>{{ data.desc }}</td>
                <td>{{ data.created | date }}</td>

                <td>
                    <a (click)="select(data)"> 选择 </a>
                </td>
            </tr>
        </tbody>
    </nz-table>
    <ng-template #totalTemplate
        let-total>总共 {{ total }} 条</ng-template>
</ng-container>
<ng-container *ngIf="!ref">
    <div nz-row
        [nzGutter]="16"
        class="card">
        <div nz-col
            *ngFor="let item of datum"
            class="card-item"
            (click)="informate(item)">
            <app-card [img]="'product.png'"
                [id]="item.id"
                [name]="item.name"
                [title]="'产品'"></app-card>
        </div>
    </div>
    <app-detail [isVisible]="isVisible"
        [title]="'产品'"
        [chooseData]="chooseData"
        (edit)="handleEdit($event)"
        (delete)="delete($event)"
        (close)="close()"></app-detail>
    <nz-pagination style="position: fixed;  bottom: 0; right: 10px ; "
        [nzPageIndex]="pageIndex"
        [nzTotal]="total"
        nzShowSizeChanger
        [nzPageSize]="pageSize"
        (nzPageSizeChange)="pageSizeCardChange($event)"
        (nzPageIndexChange)="pageIndexCardChange($event)"></nz-pagination>
</ng-container>
